<template>
	<view>
		<!--service/addnewaddress/addnewaddress.wxml-->
		<view class="address">
		  <view class="main-box">
		    <view class="addbox z-margin-32">
		      <view>服务地址</view>
		      <view class="input_box z-padding-32 z-radius-16 z-margin-tb-32" @tap="chooseAddress">
		        <input type="text" placeholder="输入服务地址" v-model="info" disabled />
		      </view>
		    </view>
		    <view class="addbox z-margin-32">
		      <view>门牌号</view>
		      <view class="input_box z-padding-32 z-radius-16 z-margin-tb-32">
		        <input type="text" placeholder="请输入详细地址 例：1号楼1单元201室" v-model="address" />
		      </view>
		    </view>
		
		    <view class="addbox z-margin-32">
		      <view>联系人</view>
		      <view class="sinput_box">
		        <view class="input_box z-padding-32 z-radius-16 z-margin-tb-32">
		          <input type="text" placeholder="请输入联系人姓名" v-model="name" />
		        </view>
		        <view class="sex_box">
		          <view class="men" @tap="choosesex">
		            <image src="/static/service/greencircle.png" v-if="sex==1" class="greencircle" mode="" />
		            <image src="/static/login/choose.png" v-else class="greencircle" mode="" />
		            <view class="z-margin-l-16">先生</view>
		          </view>
		          <view class="men" @tap="choosesex">
		            <image src="/static/service/greencircle.png" v-if="sex==0" class="greencircle" mode="" />
		            <image src="/static/login/choose.png" v-else class="greencircle" mode="" />
		            <view class="z-margin-l-16">女士</view>
		          </view>
		        </view>
		      </view>
		    </view>
		    <view class="addbox z-margin-32">
		      <view>联系电话</view>
		      <view class="input_box z-padding-32 z-radius-16 z-margin-tb-32">
		        <input type="number" placeholder="请输入电话号码" v-model="mobile" />
		      </view>
		    </view>
		
		    <view class="defaultaddress" @tap="choosedefault">
		      <view class="defaultaddress_top">
		        <view class="z-font-w">设为默认地址</view>
		        <image src="../../static/login/choose.png" v-if="!state" class="greencircle" mode="" />
		        <image src="../../static/login/choosed.png" v-else class="greencircle" mode="" />
		      </view>
		      <view class="text_999 z-font-24 z-margin-t-24">提示：下单时会优先使用该地址</view>
		    </view>
		  </view>
		  <view class="sure z-padding-t-32"  :style="'padding-bottom:' + safeBottom">
		    <view class="btnbox">
		      <!-- <van-button type="primary" size='large' bindtap="save">确定</van-button> -->
			  <u-button @tap="save" type="primary" text="确定" color="#07C160"></u-button>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import http from "../../utils/http"
	export default {
		data() {
			return {
				type: 'add',
				    name: '',
				    sex: 1,
				    state: 0,
				    mobile: '',
				    province: '',
				    city: '',
				    district: '',
				    area: '',
				    address: '',
				    lng: '',
				    lat: '',
				    info: '',
				    safeBottom: `20px`
			}
		},
		onLoad(options) {
		    if (options.type) {
		      const eventChannel = this.getOpenerEventChannel()
		
		      eventChannel.on('editInfo',  (data) =>{
		        this.type = 'edit',
		        this.id = data.id,
		       this.name = data.name,
		        this.sex = data.sex,
		        this.state = data.state,
		        this.mobile = data.mobile,
		       this.province = data.province,
		        this.city = data.city,
		        this.district = data.district,
		        this.area = data.area,
		        this.address = data.address,
		        this.lng = data.lng,
		        this.lat = data.lat,
		        this.info = data.city + ' ' + data.area
		      })
		
		      
		    }
		  },
		methods: {
			 save() {
			    if (this.lng === '') return this.util.toast('请选择地址')
			    if (this.address.trim() === '') return this.util.toast('请输入门牌号信息')
			    if (this.name.trim() === '') return this.util.toast('请输入联系人')
			    if (this.mobile.trim() === '') return this.util.toast('请输入联系人手机号')
			    if(!/^1\d{10}$/.test(this.mobile)) return this.util.toast('请输入正确的联系人手机号')
			    let data = {
			      type: this.type,
			      name: this.name,
			      sex: this.sex,
			      state: this.state,
			      mobile: this.mobile,
			      province: this.province,
			      city: this.city,
			      district: this.district,
			      area: this.area,
			      address: this.address,
			      lng: this.lng,
			      lat: this.lat,
			    }
			    if (this.type === 'edit') {
			      data['id'] = this.id
			    }
			    http.post('/address/handleaddress', data,true).then(res => {
			      this.util.toast(res.msg)
			      const eventChannel = this.getOpenerEventChannel()
			      eventChannel.emit('saveAddress');
			      this.util.back();
			    })
			  },
			  chooseAddress() {
			    http.chooseLocation(this.lat,this.lng).then(res => {
			      this.province = res.province,
			      this.city = res.city,
			      this.district = res.district,
			      this.area = res.name,
			      this.lng = res.lng,
			      this.lat = res.lat,
			      this.info = res.city + ' ' + res.name
			    })
			  },
			  // setAddress(e) {
			  //   this.address = e.detail.value
			  // },
			  // setMobile(e) {
			  //   this.mobile = e.detail.value
			  // },
			  // setName(e) {
			  //   this.name = e.detail.value
			  // },
			  choosesex() {
			    this.sex = this.sex == 1 ? 0 : 1
			  },
			  choosedefault() {
			    this.state = this.state == 1 ? 0 : 1
			  },
		}
	}
</script>

<style>
page{
  position: relative;
  background-color: #fff;
}
.address{
  height: 100vh;
  /* #ifdef H5 */
  height: calc(100vh - 90rpx);
  /* #endif */
  display: flex;
  flex-direction: column;
}
.main-box{
  overflow-y: auto;
  flex: 1;
}
.input_box{
  background-color: #F5F7F9;
}
.sex_box{
  display: flex;
  flex: 1;
  justify-content: space-around;
}
.sinput_box{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.men{
  display: flex;
  align-items: center;
}
.men{
  display: flex;
  align-items: center;
}
.greencircle{
  width: 32rpx;
  height: 32rpx;
}
.defaultaddress{
  width: 686rpx;
  margin: 0 auto;
}
.defaultaddress_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sure{
  display: flex;
  align-content: center;
  justify-content: center;
  bottom: 100rpx;
  width: 100vw;
  flex-shrink: 0;
}
.btnbox{
width: 680rpx;
}
</style>
